<script setup lang="ts">
import * as video from '@/apis/video'
import { type navClass, type typeCalss } from '@/apis/video'
import * as helper from '@/util/helper'
import * as admin from '@/apis/admin'

import { watchEffect, ref, type Ref } from 'vue'
const loading = ref(true)
const dialogFormVisible = ref(false)
const classNav: Ref<navClass[]> = ref([])
const editNavCalssList: Ref<number[]> = ref([])
const showCalssList: Ref<typeCalss[]> = ref([])
video
  .getClassNav()
  .then(res => {
    classNav.value = res.data.data
    return video.getClass()
  })
  .then(res => {
    showCalssList.value = res.data.data
    loading.value = false
  })

function NavTypeId2Class(typeid: number): navClass {
  for (let v of classNav.value) {
    if (v.type_id == typeid) return v
  }
  return { type_id: 0, type_name: '' }
}

function delShowClass(row: typeCalss) {
  for (let i in showCalssList.value) {
    if (showCalssList.value[i].type_id == row.type_id) {
      showCalssList.value.splice(parseInt(i), 1)
      break
    }
  }
}

let editValue = ref(true)
let editRow: Ref<typeCalss>
let editIndexValue: Ref<number> = ref(0)
function editNavClass(row: typeCalss) {
  editNavCalssList.value = row.type_ids as number[]
  editRow = ref(row)
  editValue.value = false
  dialogFormVisible.value = true
}

function editIndex(row: typeCalss) {
  editRow = ref(row)
  editValue.value = true
  editIndexValue.value = row.index as number
  dialogFormVisible.value = true
}

function sureEdit() {
  if (editValue.value == false) {
    let arr = []
    for (let v of editNavCalssList.value) arr.push(v)
    console.log(arr, editRow.value)
    editRow.value.type_ids = arr
  } else {
    editRow.value.index = editIndexValue.value
  }
  dialogFormVisible.value = false
}

function saveClass() {
  loading.value = true
  admin.editClass(showCalssList.value).then(res => {
    loading.value = false
    if (res.data.code != 200) {
      ElMessage(res.data.msg)
      return
    }
    ElMessage('上传成功')
  })
}
</script>

<template>
  <el-card class="box-card" v-loading="loading">
    <template #header>
      <div class="card-header">
        <el-form>
          <el-form-item label="操作:">
            <el-button @click="saveClass">保存</el-button>
          </el-form-item>
        </el-form>
      </div>
    </template>

    <el-table :data="showCalssList" border style="width: 100%" table-layout="auto" :default-sort="{ prop: 'index', order: 'ascending' }">
      <!-- <el-table-column prop="type_id" label="id" /> -->
      <el-table-column label="顺序" width="100px">
        <template #default="scope">
          <div style="display: flex; align-items: center">
            {{ scope.row.index }}
            <span style="width: 10px"></span>
            <el-button size="small" @click="editIndex(scope.row)">
              <el-icon><EditPen /></el-icon>
            </el-button>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="分类名字" width="150px">
        <template #default="scope">
          <el-input v-model="scope.row.type_name" placeholder="请输入类名"></el-input>
        </template>
      </el-table-column>
      <el-table-column label="包含原生分类">
        <template #default="scope">
          <el-tag v-for="id in scope.row.type_ids" :key="id" type="info">{{ NavTypeId2Class(id).type_name }}:{{ NavTypeId2Class(id).type_id }}</el-tag>
          <el-button size="small" @click="editNavClass(scope.row)">
            <el-icon><EditPen /></el-icon>
          </el-button>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="110px">
        <template #header>
          <span style="padding-right: 10px">操作</span>
          <el-button size="small" @click="showCalssList.push({ type_id: helper.makeRandom(8), type_name: '', index: showCalssList.length })">添加</el-button>
          <!-- <el-input v-model="search" size="small" placeholder="Type to search" /> -->
        </template>
        <template #default="scope">
          <el-button size="small" @click="delShowClass(scope.row)">删除</el-button>
        </template>
      </el-table-column>
      <el-table-column prop="index" class-name="noShowColumn" label-class-name="noShowColumn" />
    </el-table>
  </el-card>

  <el-dialog v-model="dialogFormVisible" title="编辑" width="602px">
    <el-form @submit.prevent>
      <el-form-item v-if="editValue" label="顺序">
        <!-- <el-input v-model="editIndexValue" type="number" autocomplete="off" /> -->
        <el-input-number v-model="editIndexValue" />
      </el-form-item>
      <el-transfer
        v-else
        v-model="editNavCalssList"
        :data="classNav"
        :props="{
          key: 'type_id',
          label: 'type_name'
        }"
      />
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="sureEdit">确定</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<style>
.noShowColumn {
  display: none;
}
</style>
